@import './mixins.styl'
@import './variables.styl'
@import './animation.styl'
/* 这里定义一些通用的样式 */

/* @section 常规样式 */
.cm-content
  position relative
  width 100%
  height 100%

.cm-relative
  position relative
.cm-absolute
  position absolute

/* @section 两种隐藏模式 */
.cm-none
  display none
.cm-hidden
  visibility hidden

/* @section Flex布局相关 */
.cm-flex
  /* #ifndef APP-NVUE */
  display flex
  /* #endif */
  flex-direction row
.cm-inline-flex
  display inline-flex
  flex-direction row

.cm-flex-wrap
  flex-wrap wrap
.cm-flex-r-wrap
  flex-wrap wrap-reverse

.cm-flex-col
  flex-direction column
.cm-flex-r-row
  flex-direction row-reverse
.cm-flex-r-col
  flex-direction column-reverse

.cm-flex-j-start
  justify-content flex-start
.cm-flex-j-end
  justify-content flex-end
.cm-flex-j-center
  justify-content center
.cm-flex-j-around
  justify-content space-around
.cm-flex-j-between
  justify-content space-between

.cm-flex-a-start
  align-items flex-start
.cm-flex-a-end
  align-items flex-end
.cm-flex-a-center
  align-items center
.cm-flex-a-baseline
  align-items baseline

.cm-flex-ac-start
  align-content flex-start
.cm-flex-ac-end
  align-content flex-end
.cm-flex-ac-center
  align-content center
.cm-flex-ac-between
  align-content space-between
.cm-flex-ac-around
  align-content space-around

.cm-flex-s-0
  flex-shrink 0
.cm-flex-s-1
  flex-shrink 1

for i in 0 1 2 3 4
  .cm-flex-g-{i}
    flex-grow i

.cm-flex-as-start
  align-self flex-start
.cm-flex-as-end
  align-self flex-end
.cm-flex-as-center
  align-self center
.cm-flex-as-baseline
  align-self baseline
.cm-flex-as-stretch
  align-self stretch

/* @section display模型指定 */
.cm-block
  display block
.cm-inline-block
  display inline-block

/* @section 间距相关 */
for direction in -top -bottom -left -right ''
  for i in 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
    .cm-margin{direction}-{i}
      margin{direction}: 1px * i !important
    .cm-padding{direction}-{i}
      padding{direction}: 1px * i !important

// 盒模型设置，主要影响padding和border
.cm-bs-box
  box-sizing border-box

/* @section 文字相关 */
/* 排版 */
.cm-text-left
  text-align left
.cm-text-center
  text-align center
.cm-text-right
  text-align right

/* 粗细 */
.cm-bold
  font-weight 700
/* 斜体 */
.cm-italic
  font-style italic

// 字体大小相关
for i in 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
  .cm-text-{i}
    font-size: 1px * i
    
/* 行高 */
for i in 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
  .cm-text-h-{i}px
    line-height 1px * i
  .cm-text-h-{i}
    line-height 0.1 * i

/* @section 宽度 */
for i in 0 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100
  .cm-w-{i}
    width 1% * i
  
  .cm-h-{i}
    height 1% * i

/* @section 圆角 */
for i in 1 2 3 4 5 6 7 8 9 10
  .cm-border-radius-{i}
    border-radius 1px * i

.cm-circle
  border-radius 50%